<template>
  <el-dialog v-if="load" title="锁定库存" v-model="visible" append-to-body :close-on-click-modal="false" :z-index="2000" width="800px" @close="handleClose">
    <VTable ref="tableRef" v-bind="tableOptions"></VTable>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const api = inject('api')
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const tableRef = ref()
const type = inject('type')

const tableOptions = reactive({
  height: 460,
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.lock({ ...form, ...page, type })
    }
  },
  columns: [
    { title: '订单号', field: 'order_no' },
    { title: '状态', field: 'order_status', width: 80 },
    { title: 'SKU', field: 'sku', width: 80 },
    { title: '订单需求数量', field: 'need_num', width: 100 },
    { title: '锁定数量', field: 'lock_num', width: 80 },
    { title: '发货仓库', field: 'warehouse_name', width: 80 },
    { title: '下单时间', field: 'order_create_time' },
  ]
})

// 打开弹窗
const open = async ({sku, warehouse_id}) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  loadings = reactive({})
  visible.value = true
  nextTick(() => {
    tableRef?.value.setForm({sku: [sku], warehouse_id: warehouse_id ? [warehouse_id] : []})
    tableRef?.value.query()
  })
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>